<template>
	<view>
		<u-navbar
			title="联系客服"
			leftIcon=""
			titleStyle="color:#fff;"
			:placeholder="true"
			:bgColor="themeColor.color">
		</u-navbar>
		<view class="service-panel" :style="{height:height}">
			<image src="../../static/kf.png" mode="widthFix"></image>
			<scroll-view :scroll-y="false" style="height: 300px;">
				<view class="service-item" v-if="zongService && zongService.sitestatus == '1'" @click="openBrowser(zongService.siteaddress)">
					<view class="service-item-left">
						<u--image :showLoading="true" :src="zongService.sitelogo" width="56px" height="56px"></u--image>
					</view>
					<view class="service-item-center">
						<view class="text-bold">{{zongService.sitename}}</view>
						<view class="u-m-t-25 u-info u-font-24">支持百科、客服、诊股、自助类等</view>
					</view>
					<view class="service-item-tubiao">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="service-item" v-if="ageService && ageService.sitestatus == 1" @click="openBrowser(ageService.siteaddress)">
					<view class="service-item-left">
						<u--image :showLoading="true" :src="ageService.logo" width="56px" height="56px"></u--image>
					</view>
					<view class="service-item-center">
						<view class="text-bold">{{ageService.sitename}}</view>
						<view class="u-m-t-25 u-info u-font-24">支持百科、客服、诊股、自助类等</view>
					</view>
					<view class="service-item-tubiao">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</scroll-view>
			
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		computed:{
			...mapState({
				zongService: state => state.app.zongService,
				ageService: state => state.app.ageService,
			})
		},
		name:"ui-service",
		data() {
			return {};
		},
		created(){
			let sysheight = uni.getSystemInfoSync().windowHeight
			this.sysheight = `${sysheight}px`
			this.height = `${sysheight-44-50}px`
		},
		methods:{
			load(){
				
			},
			openBrowser(str){
				this.$app.openBrowser(str)
			}
		}
	}
</script>

<style lang="scss">
	.service-panel{
		width: 100%;
		background: url(../../static/kf_bj.png) no-repeat 50%;
		background-size:100% 100%;
		image{
			display: block;
			width: 100%;
		}
		scroll-view{
			margin-top: 30rpx;
		}
		.service-item{
			background-color: #fff;
			margin: 0 30rpx 30rpx 30rpx;
			padding: 40rpx;
			border-radius: 12rpx;
			display: flex;
			flex-direction: row;
			.service-item-left{
				width: 102rpx;
			}
			.service-item-center{
				-webkit-flex: 1;
				flex: 1;
				margin-left: 30rpx;
			}
			.service-item-tubiao{
				width: 30rpx;
				margin: auto;
				height: 30rpx;
			}
		}
	}
	
	
</style>
